<template>
	<view class="orderForGoods">
		<view v-if='expense.address && add_time==0' class="address"
			@click="skip('/pages/user/list/address/address?flag=true')">
			<main>
				<view>
					<view>
						<view>{{expense.address.full_address}}</view>
						<p>{{expense.address.username}}<span>{{expense.address.mobile}}</span></p>
					</view>
				</view>
				<u-icon name="arrow-right" color="#08702E" size="15"></u-icon>
			</main>
		</view>
		<button v-if='expense.address==""&&add_time==0'
			@click="skip('/pages/user/list/address/address?flag=true')">选择地址</button>
		<view class="commodity">
			<img :src="$imgUrl+expense.goods.goods_image"></img>
			<view>
				<p>
					{{ expense.goods.goods_name }}
					<image src="../../static/home/27.png"></image>
					<span>{{expense.goods.duration}}分钟</span>
				</p>
				<view>
					<p>{{expense.goods.goods_price}}<span>元{{expense.goods.unit?'/'+expense.goods.unit:''}}</span></p>
					{{expense.goods.goods_virtual_sales}}人选择
				</view>
			</view>
			<footer>
				<p @click='minus'>-</p>
				<input disabled type="number" v-model="commodity.num">
				<p @click='plus'>+</p>
			</footer>
		</view>
		<view class="technician" v-if="add_time==0">
			<p style="border-bottom: 1px solid #E5E5E5;">
				<span>服务技师</span>
				<span>{{expense.tech_info.username}}</span>
			</p>
			<p @click='shows'>
				<span>服务时间</span>
				<span>{{date}}<u-icon name="arrow-right" color="#333333" size="8"></u-icon></span>
			</p>
		</view>
		<view class="road" v-if='expense.address && add_time==0'>
			<view>出行方式
				<p>
					<button v-if="expense.bus.fee!=0" @click='types(1)'
						:class="{'button':from.traffic_type==1}">公交/地铁</button>
					<button v-if="expense.tex.fee!=0" @click='types(2)'
						:class="{'button':from.traffic_type==2}">滴滴/出租</button>
					<button @click='types(3)' v-if="expense.tex.fee==0&&expense.bus.fee==0"
						:class="{'button':from.traffic_type==3}">免出行费</button>
				</p>
			</view>
			<span v-if='from.traffic_type==2'>
				全程{{expense.tex.distance}}公里，出租出行收取来回车费，起步价{{expense.tex.config.start_step}}元，起步{{expense.tex.config.start}}公里，每公里均价{{expense.tex.config.avg}}元。
			</span>
			<span v-if='from.traffic_type==1'>
				全程{{expense.bus.distance}}公里，公交出行收取来回车费，起步价{{expense.bus.config.start_step}}元，起步{{expense.bus.config.start}}公里，每公里均价{{expense.bus.config.avg}}元。
			</span>
			<p v-if="from.traffic_type!=3">车费
				<span>￥{{from.traffic_type==2?expense.tex.fee:expense.bus.fee}}</span>
			</p>
		</view>
		<view class="pay">
			<view>支付方式</view>
			<p style="border-bottom: 1px solid #E5E5E5;" @click='changePayType(1)'>
				<span>
					<image src="../../static/technician/01.png"></image>余额支付
				</span>
				<i :class="{'i':from.pay_type ==1}"></i>
			</p>
			<p @click='changePayType(2)'>
				<span>
					<image src="../../static/technician/11_1.png"></image>微信支付
				</span>
				<i :class="{'i':from.pay_type==2}"></i>
			</p>
		</view>
		<view class="discounts" v-if='expense.address && add_time==0'>
			<p @click="skip('/pages/user/list/discounts/discounts?totalPrices='+totalPrices+'&goods_id='+from.goods_id+'&addressId='+from.address_id+'&tech_id='+from.tech_id)"
				v-if="add_time!=1">
				优惠券
				<span>{{from.coupon_amount?'立减'+from.coupon_amount+'元':''}}<u-icon name="arrow-right" color="#333"
						size="10"></u-icon></span>
			</p>
			<view>
				<p>备注</p>
				<textarea class="textarea" v-model="from.remark" placeholder="请用简单的几句话备注需求~~"></textarea>
			</view>
		</view>
		<view class="footer">
			<view>
				<span>合计：</span>
				<p>￥{{totalPrices}} <span v-if="from.coupon_amount">已优惠{{from.coupon_amount}}元</span></p>
			</view>
			<button @click="submit" v-if="add_time==0">提交订单</button>
			<button @click="upgradeOrder" v-if="add_time==1">提交订单</button>
			<button @click="addHourOrder" v-if="add_time==2">提交订单</button>
		</view>
		<!-- 选择时间 -->
		<u-popup :show="show" mode="bottom" @close="close" :closeOnClickOverlay='true'>
			<view class="popup">
				<nav>
					<p v-for='(value,index) in Hebdom' :key="value.Date" @click='optFors(index)'>
						{{value.week}}
						<span :class='{"span":optIndex==index}'>{{value.Month}}月{{value.Date}}日</span>
					</p>
				</nav>
				<main>
					<p v-for='value in time_list' :key="value.work_time" :class="{'p':value.is_ok==0}"
						@click='times(value)'>{{value.work_time}}
						<span>{{value.is_ok==1?'可选':'不可约'}}</span>
					</p>
				</main>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import footers from '../../components/footers/footers.vue'
	export default {
		components: {
			footers
		},
		data() {
			return {
				from: {
					remark: '',
					user_coupon_id: '',
					goods_id: '',
					address_id: '',
					goods_num: 1,
					tech_id: '',
					reserve_time: '',
					pay_type: 2,
					traffic_type: 2,
					order_sn: '',

					//其它字段

					goods_price: "",
					coupon_amount: "",
				},
				totalPrices: '',
				commodity: {
					num: 1,
				},
				type: 1,
				index: 1,
				add_time: 0,
				txt: "",
				show: false,
				Hebdom: [],
				optFor: '',
				optIndex: '',
				time: '',
				data: {},
				address_id: '',
				time_list: [],
				expense: {
					tech_info: {},
					address: {},
					goods: {},
					bus: {
						distance: '',
						config: {
							avg: '',
							start: '',
						}
					},
					tex: {
						distance: '',
						config: {
							avg: '',
							start: '',
						}
					}
				}
			};
		},
		onShow() {
			if (uni.getStorageSync('xzdz')) {
				this.from.address_id = uni.getStorageSync('xzdz');
				uni.setStorageSync('orderAddressId', this.from.address_id);
			}
			this.buyOrderDetail();
		},
		onLoad(option) {
			this.from.order_sn = option.order_sn || ''
			if (option.num) {
				this.commodity.num = option.num
				uni.setStorageSync('xzsl', this.commodity.num);
			} else {
				this.commodity.num = uni.getStorageSync('xzsl') || 1
			}
			if (option.type) {
				this.add_time = option.type == 999 ? 1 : option.type == 1000 ? 2 : 0
				uni.setStorageSync('addTime', option.type);
			} else {
				this.add_time = uni.getStorageSync('addTime') == 999 ? 1 : option.type == 1000 ? 2 : 0
			}
			if (option.goods_id) {
				this.from.goods_id = option.goods_id;
				uni.setStorageSync('orderGoodsId', option.goods_id);
			} else {
				this.from.goods_id = uni.getStorageSync('orderGoodsId');
			}
			if (option.tech_id) {
				this.from.tech_id = option.tech_id;
				uni.setStorageSync('orderTechId', option.tech_id);
			} else {
				this.from.tech_id = uni.getStorageSync('orderTechId');
			}
			if (option.coupon_id) {
				this.from.user_coupon_id = option.coupon_id;
				// uni.setStorageSync('orderCouponId',option.user_coupon_id);
			}
			if (option.coupon_amount) {
				this.from.coupon_amount = option.coupon_amount;
				// uni.setStorageSync('orderCouponAmount',option.coupon_amount);
			}
			this.buyOrderDetail();
			let weekArr = ['周日', '周一', ' 周二', '周三', '周四', '周五', '周六'];
			for (let i = 0; i <= 6; i++) {
				let times = +new Date() + (24 * 60 * 60 * 1000) * i
				let dates = new Date(times)
				this.Hebdom.push({
					week: weekArr[dates.getDay()],
					Year: dates.getFullYear(),
					Month: dates.getMonth() + 1,
					Date: dates.getDate(),
				})
			}
			this.optFors(0)
			if (uni.getStorageSync('work_time')) {
				let date = JSON.parse(uni.getStorageSync('work_time'))
				this.optIndex = JSON.parse(uni.getStorageSync('work_time')).optIndex
				this.from.reserve_time = this.Hebdom[this.optIndex].Year + '-' + this.Hebdom[this.optIndex].Month +
					'-' + this.Hebdom[this.optIndex].Date + ' ' + date.work_time
				this.time = JSON.parse(uni.getStorageSync('work_time')).work_time
				// uni.removeStorageSync('work_time')
			}
			if (uni.getStorageSync('goods_num')) {
				this.commodity.num = uni.getStorageSync('goods_num');
				this.from.goods_num = this.commodity.num
				// uni.removeStorageSync('goods_num')
			}
		},
		computed: {
			date() {
				if (this.time == '') {
					return '请选择服务时间'
				}
				return this.optIndex == 0 ? '今天' + this.time : this.Hebdom[this.optIndex].week + this.time
			}
		},
		methods: {
			getTecServiceTime(date) {
				this.time_list = []
				this.$httpRequest('/order/getTecServiceTime', {
					tech_id: this.from.tech_id,
					date
				}).then(res => {
					this.time_list = res.data
				})
			},
			buyOrderDetail() {
				this.$httpRequest('/order/buyOrderDetail', {
					...this.from,
					add_time: this.add_time
				}).then(res => {
					this.expense = res.data;
					this.from.address_id = res.data.address.id;
					this.from.goods_price = res.data.goods.goods_price;
					let che = this.from.traffic_type == 2 ? this.expense.tex.fee : this.expense.bus.fee
					if (this.expense.bus.fee != 0) {
						this.from.traffic_type = 1
					}
					if (this.expense.tex.fee != 0) {
						this.from.traffic_type = 2
					}
					if (this.expense.tex.fee == 0 && this.expense.bus.fee == 0) {
						this.from.traffic_type = 3
					}

					let yhj = this.from.coupon_amount ? this.from.coupon_amount : 0
					this.totalPrices = this.commodity.num * this.from.goods_price + Number(che) - yhj
				})
			},
			// 减
			minus(index) {
				if (this.commodity.num > 1) {
					this.commodity.num -= 1;
					this.from.goods_num = this.commodity.num
					uni.setStorageSync('goods_num', this.commodity.num)
					let che = this.from.traffic_type == 2 ? this.expense.tex.fee : this.expense.bus.fee
					let yhj = this.from.coupon_amount ? this.from.coupon_amount : 0
					this.totalPrices = this.commodity.num * this.from.goods_price + Number(che) - yhj
				}
			},
			// 加
			plus(index) {
				if (this.add_time == 2) {
					this.commodity.num =Number(this.commodity.num) + 1;
				}else{
					this.commodity.num = 1;
				}
				this.from.goods_num = this.commodity.num
				uni.setStorageSync('goods_num', this.commodity.num)
				let che = this.from.traffic_type == 2 ? this.expense.tex.fee : this.expense.bus.fee
				let yhj = this.from.coupon_amount ? this.from.coupon_amount : 0
				this.totalPrices = this.commodity.num * this.from.goods_price + Number(che) - yhj
			},
			skip(url) {
				uni.navigateTo({
					url,
				})
			},
			types(index) {
				this.from.traffic_type = index
				let che = this.from.traffic_type == 2 ? this.expense.tex.fee : this.expense.bus.fee
				let yhj = this.from.coupon_amount ? this.from.coupon_amount : 0
				this.totalPrices = this.commodity.num * this.from.goods_price + Number(che) - yhj
			},
			changePayType(index) {
				this.from.pay_type = index;
			},
			// 抽屉弹出
			shows() {
				this.show = true
			},
			// 抽屉弹出关闭
			close() {
				this.show = false
			},
			// 日期改变
			optFors(index) {
				if (this.optIndex !== index) {
					this.optIndex = index
					this.optFor = this.Hebdom[index].Year + '/' + this.Hebdom[index].Month + '/' + this.Hebdom[index].Date
					this.getTecServiceTime(this.Hebdom[index].Year + '-' + this.Hebdom[index].Month + '-' + this.Hebdom[
							index]
						.Date)
				}
			},
			// 选中时间
			times(date) {
				if (date.is_ok == 1) {
					date.optIndex = this.optIndex
					uni.setStorageSync('work_time', JSON.stringify(date))
					this.from.reserve_time = this.Hebdom[this.optIndex].Year + '-' + this.Hebdom[this.optIndex].Month +
						'-' + this.Hebdom[this.optIndex].Date + ' ' + date.work_time
					this.time = date.work_time
					this.show = false
				}
			},
			// 加钟
			addHourOrder() {
				this.from.goods_num = this.commodity.num
				uni.showModal({
					title: '加钟',
					content: '您是否确定要加钟?',
					success: (res) => {
						if (res.confirm) {
							this.$httpRequest('/order/addHourOrder', this.from).then(res => {
								this.$httpRequest('/pay/pay', {
									order_sn: res.data,
									order_type: 1
								}).then(data => {
									if (this.from.pay_type == 1) {
										uni.showToast({
											title: '支付成功',
											duration: 1000
										});
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/accomplish/accomplish?order_sn=' +
													res.data + '&order_type=1'
											});
										}, 1000)
									} else {
										function onBridgeReady() {
											WeixinJSBridge.invoke('getBrandWCPayRequest', {
													"appId": data.data
														.appId, //公众号ID，由商户传入     
													"timeStamp": data.data
														.timeStamp, //时间戳，自1970年以来的秒数     
													"nonceStr": data.data
														.nonceStr, //随机串     
													"package": data.data.package,
													"signType": "RSA", //微信签名方式：     
													"paySign": data.data.paySign, //微信签名 
												},
												function(datas) {
													if (datas.err_msg ==
														"get_brand_wcpay_request:ok") {
														uni.removeStorageSync(
															'orderAddressId')
														uni.redirectTo({
															url: '/pages/accomplish/accomplish?order_sn=' +
																res.data
														});
													}
												});
										}
										if (typeof WeixinJSBridge == "undefined") {
											if (document.addEventListener) {
												document.addEventListener(
													'WeixinJSBridgeReady', onBridgeReady,
													false);
											} else if (document.attachEvent) {
												document.attachEvent('WeixinJSBridgeReady',
													onBridgeReady);
												document.attachEvent('onWeixinJSBridgeReady',
													onBridgeReady);
											}
										} else {
											onBridgeReady();
										}
									}
								})
							});
						} else if (res.cancel) {}
					}
				});
			},
			// 升级订单
			upgradeOrder() {
				this.from.goods_num = this.commodity.num
				uni.showModal({
					title: '升级订单',
					content: '您确定要提升级订单吗?',
					success: (res) => {
						if (res.confirm) {
							this.$httpRequest('/order/upgradeOrder', this.from).then(res => {
								this.$httpRequest('/pay/pay', {
									order_sn: res.data,
									order_type: 2
								}).then(data => {
									if (this.from.pay_type == 1) {
										uni.showToast({
											title: '支付成功',
											duration: 1000
										});
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/accomplish/accomplish?order_sn=' +
													res.data + '&order_type=2'
											});
										}, 1000)
									} else {
										function onBridgeReady() {
											WeixinJSBridge.invoke('getBrandWCPayRequest', {
													"appId": data.data
														.appId, //公众号ID，由商户传入     
													"timeStamp": data.data
														.timeStamp, //时间戳，自1970年以来的秒数     
													"nonceStr": data.data
														.nonceStr, //随机串     
													"package": data.data.package,
													"signType": "RSA", //微信签名方式：     
													"paySign": data.data.paySign, //微信签名 
												},
												function(datas) {
													if (datas.err_msg ==
														"get_brand_wcpay_request:ok") {
														uni.removeStorageSync(
															'orderAddressId')
														uni.redirectTo({
															url: '/pages/accomplish/accomplish?order_sn=' +
																res.data
														});
													}
												});
										}
										if (typeof WeixinJSBridge == "undefined") {
											if (document.addEventListener) {
												document.addEventListener(
													'WeixinJSBridgeReady', onBridgeReady,
													false);
											} else if (document.attachEvent) {
												document.attachEvent('WeixinJSBridgeReady',
													onBridgeReady);
												document.attachEvent('onWeixinJSBridgeReady',
													onBridgeReady);
											}
										} else {
											onBridgeReady();
										}
									}
								})
							});
						} else if (res.cancel) {}
					}
				});
			},
			// 提交订单
			submit() {
				this.from.goods_num = this.commodity.num
				if (!this.from.address_id) {
					uni.showToast({
						title: '请选择地址',
						icon: 'error',
						duration: 2000
					});
					return
				}
				if (!this.from.reserve_time) {
					uni.showToast({
						title: '请选择服务时间',
						icon: 'error',
						duration: 2000
					});
					return
				}
				uni.showModal({
					title: '提交订单',
					content: '您确定要提交该订单吗?',
					success: (res) => {
						if (res.confirm) {
							this.$httpRequest('/order/createOrder', this.from).then(res => {
								this.$httpRequest('/pay/pay', {
									order_sn: res.data
								}).then(data => {
									if (this.from.pay_type == 1) {
										uni.showToast({
											title: '支付成功',
											duration: 1000
										});
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/accomplish/accomplish?order_sn=' +
													res
													.data
											});
										}, 1000)
									} else {
										function onBridgeReady() {
											WeixinJSBridge.invoke('getBrandWCPayRequest', {
													"appId": data.data
														.appId, //公众号ID，由商户传入     
													"timeStamp": data.data
														.timeStamp, //时间戳，自1970年以来的秒数     
													"nonceStr": data.data
														.nonceStr, //随机串     
													"package": data.data.package,
													"signType": "RSA", //微信签名方式：     
													"paySign": data.data.paySign, //微信签名 
												},
												function(datas) {
													if (datas.err_msg ==
														"get_brand_wcpay_request:ok") {
														uni.removeStorageSync(
															'orderAddressId')
														uni.redirectTo({
															url: '/pages/accomplish/accomplish?order_sn=' +
																res.data
														});
													}
												});
										}
										if (typeof WeixinJSBridge == "undefined") {
											if (document.addEventListener) {
												document.addEventListener(
													'WeixinJSBridgeReady', onBridgeReady,
													false);
											} else if (document.attachEvent) {
												document.attachEvent('WeixinJSBridgeReady',
													onBridgeReady);
												document.attachEvent('onWeixinJSBridgeReady',
													onBridgeReady);
											}
										} else {
											onBridgeReady();
										}
									}
								})
							});
						} else if (res.cancel) {}
					}
				});

			}
		}
	}
</script>

<style lang="less">
	.orderForGoods {
		padding: 40rpx 0 120rpx;

		.footer {
			width: 690rpx;
			height: 130rpx;
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 20rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;

			&>view {
				display: flex;
				font-size: 13px;

				&>p {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 13px;

					&>span {
						font-size: 10px;
						color: #FF4815;
					}
				}
			}

			&>button {
				margin: 0;
				padding: 0;
				width: 180rpx;
				height: 68rpx;
				background: #52C276;
				color: #fff;
				line-height: 68rpx;
			}
		}

		.popup {
			width: 100%;
			min-height: 800rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #F0F0F0;
			display: flex;
			flex-direction: column;

			&>main {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
				padding: 20rpx 0 0 4rpx;
				box-sizing: border-box;
				flex: 1;
				overflow: auto;

				&>.p {
					color: #B8B8B8;
					background: #F0F0F0;
				}

				&>p {
					width: 120rpx;
					height: 80rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					background: #4EAA6D;
					border-radius: 10rpx;
					color: #fff;
					font-size: 15px;
					margin: 0 3rpx 20rpx;

					&>span {
						font-size: 10px;
					}
				}
			}

			&>nav {
				width: 100%;
				height: 88rpx;
				display: flex;

				&>p {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 15px;

					&>.span {
						background: #4EAA6D;
						color: #fff;
					}

					&>span {
						font-size: 8px;
						padding: 0 4rpx;
						border-radius: 4px;
					}
				}
			}
		}

		&>.discounts {
			width: 690rpx;
			background: #fff;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 30rpx 0rpx;
			box-sizing: border-box;

			&>view {
				border-top: 1px solid #E5E5E5;
				padding-bottom: 30rpx;

				&>p {
					font-size: 12px;
					line-height: 17px;
				}

				&>textarea {
					width: 100%;
					height: 144rpx;
					background: #F3F3F3;
					padding: 16rpx 24rpx;
					box-sizing: border-box;
					font-size: 12px;
					margin-top: 22rpx;
					border-radius: 10rpx;
				}
			}

			&>p {
				display: flex;
				height: 76rpx;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;

				&>span {
					display: flex;
					color: #FF4815;

					&>.u-icon {
						margin-left: 10rpx;
						transform: translateY(5rpx);
					}
				}
			}
		}

		&>.pay {
			width: 690rpx;
			height: 204rpx;
			background: #fff;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 30rpx;
			box-sizing: border-box;
			padding-top: 26rpx;

			&>view {
				color: #999999;
				line-height: 21px;
				font-size: 15px;
				border-bottom: 1px solid #E5E5E5;
			}

			&>p {
				font-size: 12px;
				height: 66rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>span {
					display: flex;
					align-items: center;

					&>image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}
				}

				&>.i {
					background-color: #5FC07B;
				}

				&>i {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					background: #F0F0F0;
				}
			}
		}

		&>.road {
			width: 690rpx;
			// height: 180rpx;
			background: #fff;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			padding-top: 26rpx;

			&>p {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				margin-top: 20rpx;

				&>span {
					color: #9E9E9E;
				}
			}

			&>view {
				display: flex;
				justify-content: space-between;
				font-size: 15px;
				color: #999999;
				margin: 0 0 16rpx 0;

				&>p {
					display: flex;

					&>.button {
						background: #52C276;
						color: #fff;
					}

					&>button {
						width: 140rpx;
						height: 36rpx;
						line-height: 36rpx;
						font-size: 12px;
						padding: 0;
						margin: 0 10rpx;
						background: #fff;
						color: #333;
					}
				}
			}

			&>span {
				font-size: 8px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box !important;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				border-bottom: 1px solid #E5E5E5;
			}
		}

		&>.technician {
			width: 690rpx;
			height: 140rpx;
			background: #fff;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 40rpx;
			box-sizing: border-box;

			&>p {
				display: flex;
				align-items: center;
				height: 50%;
				justify-content: space-between;
				font-size: 13px;

				&>span {
					display: flex;

					&>.u-icon {
						margin-left: 10rpx;
					}
				}
			}
		}

		&>.commodity {
			width: 690rpx;
			height: 136rpx;
			background: #fff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			margin: 20rpx auto;
			padding-right: 10rpx;
			box-sizing: border-box;

			&>footer {
				display: flex;
				padding-right: 10rpx;

				&>input {
					width: 100rpx;
					text-align: center;
				}

				&>p {}
			}

			&>img {
				width: 176rpx;
				height: 112rpx;
				border-radius: 20rpx;
				margin: 10rpx;
			}

			&>view {
				margin-right: 30rpx;
				flex: 1;

				&>view {
					color: #9E9E9E;
					font-size: 8px;
					display: flex;
					align-items: flex-end;
					margin-top: 10rpx;

					&>p {
						color: #52C276;
						font-size: 15px;
						margin-right: 20rpx;

						&>span {
							font-size: 8px;
						}
					}
				}

				&>p {
					font-size: 13px;
					color: #333333;

					&>image {
						width: 20rpx;
						height: 20rpx;
						margin: 0 10rpx 0 28rpx;
					}

					&>span {
						font-size: 8px;
						color: #9E9E9E;
					}
				}
			}
		}

		&>.address {
			width: 690rpx;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 20rpx;
			box-sizing: border-box;
			color: #333;
			background: #5FC07B;

			&>main {
				width: 100%;
				display: flex;
				justify-content: space-between;

				&>view {
					display: flex;

					&>image {
						width: 26rpx;
						height: 34rpx;
						margin: 8rpx 20rpx;
					}

					&>view {
						flex: 1;

						&>view {
							width: 100%;
							padding-right: 20rpx;
							box-sizing: border-box;
							font-size: 13px;
						}

						&>p {
							font-size: 11px;
							color: #666666;
							display: flex;
							margin-top: 8rpx;

							&>span {
								margin-left: 40rpx;
							}
						}
					}

				}
			}
		}

		&>button {
			width: 690rpx;
			height: 88rpx;
			background: #52C276;
			font-size: 15px;
			color: #fff;
			line-height: 88rpx;
		}
	}
</style>